<template>
  <div>
    <div class="flex my-8">
      <span>操作时间：</span>
      <a-button
        v-for="(list, index) in leftPart"
        :key="index"
        class="mr-2"
        @click="durationChange(index)"
        :class="{ liBackground: changeLeftBackground == index }"
        >{{ list.name }}</a-button
      >
      <a-range-picker @change="Onchange" v-model="dateRange" />
    </div>
    <div class="flex mb-4">
      <a-input placeholder="请输入姓名、账号" style="width:170px" v-model="name" />
      <a-button type="primary" class="margin" @click="search">查询</a-button>
    </div>
    <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination">
      <span slot="accessTime" slot-scope="accessTime"> {{ humanizeDate(accessTime) }}</span>
    </a-table>
  </div>
</template>
<script>
import moment from 'moment'
import { getAccess } from '@/api/common'
export default {
  name: 'operationLog',
  data() {
    return {
      name: '',
      leftPart: [{ name: '全部' }, { name: '今天' }, { name: '近一周' }, { name: '近一个月' }],
      changeLeftBackground: 0,
      dateRange: [null, null],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '账号',
          dataIndex: 'username',
          key: 'username'
        },
        {
          title: '接口名',
          key: 'url',
          dataIndex: 'url'
          // scopedSlots: { customRender: 'url' }
        },
        // {
        //   title: '接口参数',
        //   key: 'params',
        //   dataIndex: 'params'
        //   // scopedSlots: { customRender: 'opr' }
        // },
        {
          title: '时间',
          key: 'accessTime',
          dataIndex: 'accessTime',
          scopedSlots: { customRender: 'accessTime' }
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    durationChange(index) {
      this.changeLeftBackground = index
      if (index == 0) {
        this.dateRange = [null, null]
        this.getData()
      }
      if (index == 1) {
        this.dateRange = [moment(Date.now(), 'x'), moment(Date.now(), 'x')]
        this.getData()
      }
      if (index == 2) {
        this.dateRange = [moment(Date.now()).subtract(7, 'days'), moment(Date.now(), 'x')]
        this.getData()
      }
      if (index == 3) {
        this.dateRange = [moment(Date.now()).subtract(1, 'months'), moment(Date.now(), 'x')]
        this.getData()
      }
    },
    Onchange() {
      this.changeLeftBackground = -1
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD HH:mm:ss') || '--'
      } else {
        return '-'
      }
    },
    search() {
      this.getData()
    },
    async getData(page = 1) {
      const form = {
        page,
        page_size: this.pagination.pageSize
      }
      if (this.name) {
        form.name = this.name
      }
      if (this.dateRange[0]) {
        if (this.changeLeftBackground == 1) {
          form.startDate = Number(this.dateRange[0].startOf('day').format('X'))
          form.endDate = Number(this.dateRange[1].endOf('day').format('X'))
        } else {
          form.startDate = Number(this.dateRange[0].startOf('day').format('X'))
          form.endDate = Number(this.dateRange[1].startOf('day').format('X'))
        }
      }
      const res = await getAccess(form)
      this.pagination.total = res.result.data.total
      this.data = res.result.data.list
    }
  }
}
</script>
<style lang="css" scoped>
.liBackground {
  background: #1890ff;
  color: white;
}
.margin {
  margin-left: 15px;
  margin-right: 15px;
}
</style>
